const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // 设置模式，线上模式
  mode: 'production',
  entry: './src/main.js', // 设置入口路径
  output: {
    // 设置出口路径
    clean: true, // 每次打包都清除之前的代码
    path: path.join(__dirname, 'dist'), // 设置出口路径
    filename: 'bundle.js', // 自定义出口文件名
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 根据此html文件为模板，创建新的html文件
      template: './public/index.html',
    }),
  ],
  devServer: {
    //自定义配置端口号
    port: 3000, // 端口号
  },
  module: {
    rules: [
      {
        // 匹配所有的css文件，不区分大小写
        test: /\.css$/i,
        // 先识别解析css文件，再将解析后的css插入html文件
        // 从右往左执行
        use: ['style-loader', 'css-loader'],
      },
      {
        // 匹配所有的less文件
        test: /\.less$/i,
        // 解析less文件，并转换成css插入html文件
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
      {
        // 匹配所有图片
        test: /\.(png|jpg|gif|jpeg)$/i,
        // asset模式会把小于 8kb 的转化为 base64
        //把大于8kb的原图片输出
        type: 'asset',
      },
      {
        // 匹配所有的字体图标文件
        test: /\.(woff|woff2|svg|ttf|eot)$/i,
        // 传输所有的字体图标原文件
        type: 'asset/resource',
        generator: {
          // 自定义生成文件路径
          // font 文件夹名称
          // [name] 原文件名
          // [hash:6] hash值名称,冒号后面的数字为hash值截取的位数，用于区分原文件
          // [ext]使用原文件扩展名
          filename: 'font/[name].[hash:6][ext]',
        },
      },
      {
        test: /\.js$/i,
        exclude: /(node_modules)/, // 去掉某个文件夹里的数据不处理
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'], // 预设:转码规则(用bable开发环境本来预设的)
          },
        },
      },
    ],
  },
}
